<template>
  <div class="cart">
    <div class="cart-box">
      <div class="cart-select">
        <van-checkbox @click="checked=!checked" :value="checked" @change="onChange"></van-checkbox>
      </div>
      <a class="van-card__thumbs" href="javascript:;">
        <div>
          <img v-if="!avatar" src="../assets/img/login/Naruto.png" alt />
          <img v-else :src="'http://localhost:2020/uploads/'+avatar" />
        </div>
      </a>
      <div class="cart-content">
        <div>
          <div style="font-size:0.2rem">{{name}}</div>
          <div class="desc">{{desc}}</div>
          <div class="buttons">
            <div>
              ￥
              <span>{{pir}}</span>
            </div>
            <van-stepper :value="numVal" :min="1" :max="num" @change="numChange" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "@/css/main.css";
export default {
  props: {
    name: {
      type: String,
      required: true
    },
    desc: {
      type: String,
      default: ""
    },
    num: {
      type: Number | String,
      required: true
    },
    pirce: {
      type: Number | String,
      required: true
    },
    cid: {
      type: Number | String,
      required: true
    },
    id: {
      type: Number | String,
      required: true
    },
    select: {
      type: Boolean | String,
      default: false
    },
    avatar: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      checked: false,
      pir: 0,
      numVal: 1
    };
  },
  created() {
    // console.log(`http://localhost:2020/uploads/` + this.avatar);
    // this.$refs.img.src = `http://localhost:2020/uploads/` + this.avatar;
    this.pir = this.pirce;
    this.numVal = this.num;
  },
  methods: {
    onChange(e) {
      this.checked = e;
      this.pir = this.numVal * this.pirce;
      let data = {
        id: this.id,
        cid: this.cid,
        name: this.name,
        num: this.numVal,
        pirce: this.pir,
        e: this.checked
      };
      this.$emit("input", data);
    },
    numChange(e) {
      this.numVal = e;
      this.pir = e * this.pirce;
      let data = {
        id: this.id,
        cid: this.cid,
        name: this.name,
        num: this.numVal,
        pirce: this.pir,
        e: this.checked
      };
      this.$emit("input", data);
    }
  },
  watch: {
    select(val) {
      this.checked = val;
    }
  }
};
</script>

<style scoped>
.cart {
  position: relative;
  box-sizing: border-box;
  padding: 0.13rem 0.1rem;
  color: #323233;
  font-size: 0.2rem;
  background-color: #fafafa;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

.cart-box {
  display: flex;
}

.cart-select {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.van-card__thumbs {
  width: 1.52rem;
  height: 1.52rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.van-card__thumbs div {
  width: 1.2rem;
  height: 1.2rem;
}

.van-card__thumbs img {
  width: 100%;
  height: 100%;
}

.cart-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-content > div {
  width: 100%;
  height: 1.2rem;
}

.desc {
  font-size: 0.16rem;
  width: 100%;
  height: 0.6rem;
}

.buttons {
  display: flex;
  justify-content: space-between;
}

.buttons > div {
  color: #ee0a24;
  font-size: 0.3rem;
}
</style>